<template>
  <el-card>
    <div>
      <el-dialog
        center
        title="选择试题"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >

        <!-- 内层弹框 -->
        <el-dialog
          width="30%"
          title="内层 Dialog"
          :visible.sync="innerVisible"
          append-to-body
        />
        <!-- 筛选区 -->
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData" size="medium" label-width="50px">
            <el-col :span="6">
              <el-form-item prop="subject_id">
                <el-select v-model="formData.subject_id" placeholder="请选择学科" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field108Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="directory_id">
                <el-select v-model="formData.directory_id" placeholder="请选择目录" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field109Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="tag_id">
                <el-select v-model="formData.tag_id" placeholder="请选择标签" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field110Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="quest_type">
                <el-select v-model="formData.quest_type" placeholder="多选题" disabled clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field111Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="check_state">
                <el-select v-model="formData.check_state" placeholder="审核通过" disabled clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field112Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="show_state">
                <el-select v-model="formData.show_state" placeholder="上架" disabled clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field113Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="create_name">
                <el-input v-model="formData.create_name" placeholder="请输入创建者" clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="difficulty">
                <el-select v-model="formData.difficulty" placeholder="请选择难度" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field115Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="is_true_question">
                <el-select v-model="formData.is_true_question" placeholder="请选择是否真题" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in field116Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="create_time">
                <el-time-picker
                  v-model="formData.create_time"
                  is-range
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  :style="{width: '100%'}"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  range-separator="至"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-form>

          <el-col span="9">
            <el-row type="flex" justify="end">
              <el-button type="primary" size="small" @click="submitForm">查询</el-button>
              <el-button plain size="small" @click="submitForm">重置</el-button>
              <el-button plain type="warning" icon="el-icon-folder-add" size="small" @click="submitForm" />
            </el-row>
          </el-col>
        </el-row>
        <!-- 筛选区 -->

        <!-- 表格部分 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column
            prop="address"
            label="试题信息"
            show-overflow-tooltip
          >
            <!-- <template slot-scope="{row}"> -->
            <el-descriptions v-if="detailShow" class="margin-top" :column="4">
              <el-descriptions-item label="ID">kooriookami</el-descriptions-item>
              <el-descriptions-item label="题干信息">
                <span @click="innerVisible = true">点这个弹出来内层弹框</span>
              </el-descriptions-item>
              <el-descriptions-item label="归属学科">苏州市</el-descriptions-item>
              <el-descriptions-item label="归属学科">苏州市</el-descriptions-item>
              <el-descriptions-item label="归属目录">苏州市</el-descriptions-item>
              <el-descriptions-item label="标签信息">苏州市</el-descriptions-item>
              <el-descriptions-item label="发布状态">
                <el-tag size="small">学校</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">2023-03-08</el-descriptions-item>
            </el-descriptions>
            <!-- 点击详情按钮显示这个 -->
            <el-descriptions v-else class="margin-top" :column="4">
              <el-descriptions-item label="ID">kooriookami</el-descriptions-item>
              <el-descriptions-item label="题干信息">
                <span @click="innerVisible = true">点这个弹出来内层弹框</span>
              </el-descriptions-item>
              <el-descriptions-item label="归属学科">苏州市</el-descriptions-item>
              <el-descriptions-item label="归属学科">苏州市</el-descriptions-item>
              <el-descriptions-item label="归属目录">苏州市</el-descriptions-item>
              <el-descriptions-item label="标签信息">苏州市</el-descriptions-item>
              <el-descriptions-item label="发布状态">
                <el-tag size="small">学校</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">2023-03-08</el-descriptions-item>
            </el-descriptions>
            <!-- </template> -->
          </el-table-column>
        </el-table>
        <!-- 表格部分 -->

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </el-card>

</template>
<script>
import { getMultipleQuestionList } from '@/api/exam/exam.js'
export default {
  components: {},
  props: [],
  data() {
    return {
      dialogVisible: true, // 外层
      innerVisible: false, // 内层
      detailShow: false, // 详情
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      formData: {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: 2,
        is_true_question: '',
        show_state: 1,
        check_state: 2,
        create_name: '',
        create_time: ''
      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getMultipleQuestionList()
  },
  mounted() {},
  methods: {
    // 获取多选题列表数据
    async getMultipleQuestionList() {
      const res = await getMultipleQuestionList(this.formData)
      console.log(res, '多选题题库')
      this.tableData = res.list
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog__title{
  float: left;
  padding-bottom: 10px;
}
::v-deep .el-row{
  margin-top: 20px;
}
</style>
